<template>
  <div class="survey">
    <!-- 实时概况 -->
    <div class="class-nav clearfix">
      <div class="class-title">
        <span>实时概况</span>
      </div>
    </div>
    <el-row style="margin:20px 0;">
      <el-col :span="12">
        <div>
          <span class="f14" style="color:#353535">结算金额</span>
          <el-tooltip
            class="item"
            effect="light"
            content="0点截至当前时间，所有结算订单金额之和（拼团在成团时计入统计，问答在回答后计入统计，API导入订单不计入统计）"
            placement="right"
          >
            <i class="el-icon-info f14" />
          </el-tooltip>
        </div>
        <div class="top-show-div">
          <div class="top-show-box">
            <div class="top-show-hint">结算金额(元)</div>
            <div class="top-show-money">0.00</div>
          </div>
          <div class="top-show-box right">
            <div class="top-show-hint">昨日全天(元)</div>
            <div class="top-show-money">0.00</div>
          </div>
        </div>
        <div id="balance" style="width:100%;height:240px;" />
      </el-col>
      <el-col :span="12" class="stat-card-box">
        <template v-for="(item,index) in statList">
          <div :key="index" class="stat-card">
            <div class="card-title">
              <span>{{ item.title }}</span>
              <el-tooltip :content="item.hint" class="item" effect="light" placement="top">
                <i class="el-icon-info" />
              </el-tooltip>
            </div>
            <div class="card-user">{{ item.nowNum }}</div>
            <div class="card-yesterday">
              <span>昨天全天</span>
              <span class="card-yesterday-num">{{ item.yesterdayNum }}</span>
            </div>
          </div>
        </template>
      </el-col>
    </el-row>
    <!-- 核心指标 -->
    <div class="class-nav clearfix">
      <div class="class-title">
        <span>核心指标</span>
      </div>
    </div>
    <div style="margin:20px 0;">
      <div id="kernel" style="width:100%;height:340px;" />
    </div>
    <!-- 流量看板 -->
    <div class="class-nav clearfix">
      <div class="class-title">
        <span>流量看板</span>
      </div>
    </div>
    <div style="margin:20px 0;">
      <el-row>
        <el-col :span="16">
          <div id="flow" style="width:100%;height:340px;" />
        </el-col>
        <el-col :span="8" class="stat-card-box">
          <template v-for="(item,index) in flowList">
            <div :key="index" class="stat-card portait">
              <div class="card-title">
                <span>{{ item.title }}</span>
                <el-tooltip :content="item.hint" class="item" effect="light" placement="top">
                  <i class="el-icon-info" />
                </el-tooltip>
              </div>
              <div class="card-user">{{ item.nowNum }}</div>
              <div class="card-yesterday">
                <span>日环比</span>
                <span class="card-yesterday-num">{{ item.daysFrom }}</span>
                <span style="margin-left:30px;">周环比</span>
                <span class="card-yesterday-num">{{ item.weeksFrom }}</span>
              </div>
            </div>
          </template>
        </el-col>
      </el-row>
    </div>
    <!-- 转化看板 -->
    <div class="class-nav clearfix">
      <div class="class-title">
        <span>转化看板</span>
      </div>
    </div>
    <div style="margin:20px 0;">
      <el-row>
        <el-col :span="12">
          <div class="content-left clearfix">
            <div class="conversion-chart">
              <div class="conversion-chart_content">
                <p>访客-下单转化率</p>
                <p class="percentage">{{ dealOrder.ratio }}</p>
                <div class="conversion-growth">
                  <div class="col-growth">
                    <span class="small-list_title">日环比</span>
                    <span>
                      <span class="growth">{{ dealOrder.daysFrom }}</span>
                    </span>
                  </div>
                  <div class="col-growth">
                    <span class="small-list_title">周同比</span>
                    <span>
                      <span class="growth">{{ dealOrder.weeksFrom }}</span>
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div class="conversion-info">
              <p class="conversion-info_title">
                <span>商品访客数</span>
                <span>
                  <el-tooltip
                    content="筛选时间内，所有商品页面的访问人数，同一访客多次访问会进行去重"
                    class="item"
                    effect="light"
                    placement="top"
                  >
                    <i class="el-icon-info" />
                  </el-tooltip>
                </span>
              </p>
              <span class="conversion-info_num">{{ dealOrder.visitorNum }}</span>
              <p class="conversion-info_title">
                <span>下单人数</span>
                <span>
                  <el-tooltip
                    content="筛选时间内，点击了商品购买页面购买按钮的用户数"
                    class="item"
                    effect="light"
                    placement="top"
                  >
                    <i class="el-icon-info" />
                  </el-tooltip>
                </span>
              </p>
              <span class="conversion-info_num">{{ dealOrder.order }}</span>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="content-left clearfix">
            <div class="conversion-chart">
              <div class="conversion-chart_content">
                <p>访客-支付转化率</p>
                <p class="percentage">{{ dealPay.ratio }}</p>
                <div class="conversion-growth">
                  <div class="col-growth">
                    <span class="small-list_title">日环比</span>
                    <span>
                      <span class="growth">{{ dealPay.daysFrom }}</span>
                    </span>
                  </div>
                  <div class="col-growth">
                    <span class="small-list_title">周同比</span>
                    <span>
                      <span class="growth">{{ dealPay.weeksFrom }}</span>
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div class="conversion-info">
              <p class="conversion-info_title">
                <span>商品访客数</span>
                <span>
                  <el-tooltip
                    content="筛选时间内，所有商品页面的访问人数，同一访客多次访问会进行去重"
                    class="item"
                    effect="light"
                    placement="top"
                  >
                    <i class="el-icon-info" />
                  </el-tooltip>
                </span>
              </p>
              <span class="conversion-info_num">{{ dealPay.visitorNum }}</span>
              <p class="conversion-info_title">
                <span>付费用户数</span>
                <span>
                  <el-tooltip class="item" effect="light" placement="top">
                    <div slot="content">
                      筛选时间内，结算成功的用户数，一人多次结算记为一人（拼团在
                      <br />成团时计入筛选，问答在回答后计入筛选，API导入订单不计入筛选）
                    </div>
                    <i class="el-icon-info" />
                  </el-tooltip>
                </span>
              </p>
              <span class="conversion-info_num">{{ dealPay.order }}</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 商品看板 -->
    <div class="class-nav clearfix">
      <div class="class-title">
        <span>商品看板</span>
      </div>
    </div>
    <div style="margin:20px 0;">
      <el-row :gutter="50">
        <el-col :span="12">
          <div style="margin:20px 0;color:#353535;font-size:14px;">
            <span>访客榜TOP5商品</span>
            <el-tooltip class="item" effect="light" placement="top">
              <div slot="content">
                筛选时间内，店铺内访客数最高5个商品（商品仅包括需要付费的单品、专栏、
                <br />大专栏、会员、训练营、社群、活动）。 转化率：付费用户数/访客数
              </div>
              <i class="el-icon-info" />
            </el-tooltip>
          </div>
          <el-table
            :data="visitorTopTableData"
            :header-cell-style="{background:'#eef1f6',}"
            border
            style="width: 100%"
          >
            <el-table-column prop="number" label="排行" align="center" />
            <el-table-column prop="name" label="商品名称" align="center" />
            <el-table-column prop="articleView" label="商品访客数" align="center" />
            <el-table-column prop="conversion" label="转化率" align="center" />
          </el-table>
        </el-col>
        <el-col :span="12">
          <div style="margin:20px 0;color:#353535;font-size:14px;">
            <span>支付榜TOP5商品</span>
            <el-tooltip class="item" effect="light" placement="top">
              <div slot="content">
                筛选时间内，店铺内付费用户数最多的5个商品（商品仅包括需要、
                <br />付费的单品、专栏、大专栏、训练营、会员、社群、活动）
              </div>
              <i class="el-icon-info" />
            </el-tooltip>
          </div>
          <el-table
            :data="payTopTableData"
            :header-cell-style="{background:'#eef1f6',}"
            border
            style="width: 100%"
          >
            <el-table-column prop="number" label="排行" align="center" />
            <el-table-column prop="name" label="商品名称" align="center" />
            <el-table-column prop="articleView" label="商品访客数" align="center" />
            <el-table-column prop="conversion" label="转化率" align="center" />
          </el-table>
        </el-col>
      </el-row>
    </div>
    <!-- 用户看板 -->
    <div class="class-nav clearfix">
      <div class="class-title">
        <span>用户看板</span>
      </div>
    </div>
    <div style="margin:20px 0;">
      <el-row :gutter="50">
        <el-col :span="12" class="stat-card-box">
          <div style="margin:20px 0;color:#353535;font-size:14px;">
            <span>店铺用户</span>
          </div>
          <template v-for="(item,index) in shopList">
            <div :key="index" class="stat-card user-view">
              <div class="card-title">
                <span>{{ item.title }}</span>
                <el-tooltip :content="item.hint" class="item" effect="light" placement="top">
                  <i class="el-icon-info" />
                </el-tooltip>
              </div>
              <div class="card-user">{{ item.nowNum }}</div>
              <div class="card-yesterday">
                <div style="margin-bottom:10px;">
                  <span>日环比</span>
                  <span class="card-yesterday-num">{{ item.daysForm }}</span>
                </div>
                <div>
                  <span>周环比</span>
                  <span class="card-yesterday-num">{{ item.weeksForm }}</span>
                </div>
              </div>
            </div>
          </template>
          <div>
            <div style="margin:20px 0;">
              <div id="shopUser" style="width:100%;height:280px;" />
            </div>
          </div>
        </el-col>
        <el-col :span="12" class="stat-card-box">
          <div style="margin:20px 0;color:#353535;font-size:14px;">
            <span>店铺付费用户</span>
          </div>
          <template v-for="(item,index) in shopPayList">
            <div :key="index" class="stat-card user-view">
              <div class="card-title">
                <span>{{ item.title }}</span>
                <el-tooltip :content="item.hint" class="item" effect="light" placement="top">
                  <i class="el-icon-info" />
                </el-tooltip>
              </div>
              <div class="card-user">{{ item.nowNum }}</div>
              <div class="card-yesterday">
                <div style="margin-bottom:10px;">
                  <span>日环比</span>
                  <span class="card-yesterday-num">{{ item.daysForm }}</span>
                </div>
                <div>
                  <span>周环比</span>
                  <span class="card-yesterday-num">{{ item.weeksForm }}</span>
                </div>
              </div>
            </div>
          </template>
          <div>
            <div style="margin:20px 0;">
              <div id="shopUserPay" style="width:100%;height:280px;" />
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-row :gutter="50">
      <el-col :span="12">
        <div style="margin:20px 0;color:#353535;font-size:14px;">
          <span>店铺付费新老用户</span>
          <el-tooltip class="item" effect="light" placement="top">
            <div slot="content">
              新付费用户数：筛选时间之前没有在店铺付过费，在筛选时间内在店铺首次结算的用户数量
              <br />老付费用户：筛选时间内，在店铺内有结算，且首次结算是在筛选时间之前的用户数(拼团在
              <br />成团时计入筛选，问答在回答后计入筛选，API导入订单不计入筛选)
            </div>
            <i class="el-icon-info" />
          </el-tooltip>
        </div>
        <el-col :span="10">
          <div id="userMoney" style="width:100%;height:300px;" />
        </el-col>
        <el-col :span="10" :offset="4">
          <div id="userNum" style="width:100%;height:300px;" />
        </el-col>
      </el-col>
      <el-col :span="10" :offset="2">
        <div style="margin:20px 0;color:#353535;font-size:14px;">
          <span>客户复购率</span>
          <el-tooltip class="item" effect="light" placement="top">
            <div slot="content">
              周复购率：筛选日期所在周，本周前在店铺有过付费且本周有付费的用户数 / 本周总付费用户数
              <br />月复购率：筛选日期所在月，本月前在店铺有过付费且本月有付费的用户数 / 本月总付费用户数
            </div>
            <i class="el-icon-info" />
          </el-tooltip>
        </div>
        <div class="stat-card-box">
          <div class="stat-card again">
            <div class="card-title">
              <span>本周</span>
            </div>
            <div class="card-user">62%</div>
            <div class="card-yesterday">
              <span>较上一周</span>
              <span class="card-yesterday-num">+20%</span>
            </div>
          </div>
          <div class="stat-card again">
            <div class="card-title">
              <span>本月</span>
            </div>
            <div class="card-user">39%</div>
            <div class="card-yesterday">
              <span>较上一月</span>
              <span class="card-yesterday-num">+30%</span>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  data() {
    return {
      balanceChart: null,
      kernelChart: null,
      flowChart: null,
      shopUserChart: null,
      shopUserPayChart: null,
      userMoneyChart: null,
      userNumChart: null,
      statList: [
        {
          title: '访客数',
          hint: '0点截至当前时间，全店各页面的访问人数，同一访客多次访问会进行去重',
          nowNum: '32',
          yesterdayNum: '136'
        },
        {
          title: '付费用户数',
          hint: '0点截至当前时间，结算成功的用户数，一人多次结算记为一人（拼团在成团时计入统计，问答在回答后计入统计，API导入订单不计入统计）',
          nowNum: '312',
          yesterdayNum: '356'
        },
        {
          title: '浏览量',
          hint: '0点截至当前时间，店铺所有页面被访问的次数，一个人在统计时间内访问多次记为多次',
          nowNum: '352',
          yesterdayNum: '136'
        },
        {
          title: '支付订单数',
          hint: '0点截至当前时间，成功结算的订单数（拼团在成团时计入统计，问答在回答后计入统计，API导入订单不计入统计）',
          nowNum: '12',
          yesterdayNum: '46'
        }
      ],
      flowList: [
        {
          title: '浏览量',
          hint: '筛选时间内，店铺所有页面被访问的次数，一个人在统计时间内访问多次记为多次',
          nowNum: '112',
          daysFrom: '-8%',
          weeksFrom: '-10%'
        },
        {
          title: '访客数',
          hint: '筛选时间内，全店各页面的访问人数，同一访客多次访问会进行去重',
          nowNum: '326',
          DaysFrom: '+16%',
          WeeksFrom: '+10%'
        }
      ],
      dealOrder: {
        ratio: '32%',
        daysFrom: '+12%',
        weeksFrom: '+32%',
        visitorNum: '321',
        order: '62'
      },
      dealPay: {
        ratio: '18%',
        daysFrom: '+6%',
        weeksFrom: '+12%',
        visitorNum: '221',
        order: '32'
      },
      visitorTopTableData: [
        {
          number: '1',
          name: '高中语文作文',
          articleView: '166',
          conversion: '35%'
        },
        {
          number: '1',
          name: '高中语文作文',
          articleView: '166',
          conversion: '35%'
        },
        {
          number: '1',
          name: '高中语文作文',
          articleView: '166',
          conversion: '35%'
        },
        {
          number: '1',
          name: '高中语文作文',
          articleView: '166',
          conversion: '35%'
        },
        {
          number: '1',
          name: '高中语文作文',
          articleView: '166',
          conversion: '35%'
        }
      ],
      payTopTableData: [
        {
          number: '1',
          name: '逻辑思维',
          articleView: '166',
          conversion: '35%'
        },
        {
          number: '1',
          name: '逻辑思维',
          articleView: '166',
          conversion: '35%'
        },
        {
          number: '1',
          name: '逻辑思维',
          articleView: '166',
          conversion: '35%'
        },
        {
          number: '1',
          name: '逻辑思维',
          articleView: '166',
          conversion: '35%'
        },
        {
          number: '1',
          name: '逻辑思维',
          articleView: '166',
          conversion: '35%'
        }
      ],
      shopList: [
        {
          title: '累计用户',
          hint: '累计用户：截至到筛选时间，访问过店铺的全部用户数。',
          nowNum: '32',
          daysForm: '+26%',
          weeksForm: '+36%'
        },
        {
          title: '新增用户',
          hint: '新增用户：筛选时间内，第一次访问店铺的用户数',
          nowNum: '312',
          daysForm: '+26%',
          weeksForm: '+36%'
        },
        {
          title: '活跃用户',
          hint: '活跃用户：筛选时间内， 访问过店铺的用户数',
          nowNum: '352',
          daysForm: '+26%',
          weeksForm: '+36%'
        }
      ],
      shopPayList: [
        {
          title: '累计付费用户',
          hint: '累计付费用户：截至到筛选时间，店铺内所有结算成功的用户数（拼团在成团时计入筛选，问答在回答后计入筛选，API导入订单不计入筛选）',
          nowNum: '32',
          daysForm: '+26%',
          weeksForm: '+36%'
        },
        {
          title: '付费用户',
          hint: '付费用户：筛选时间内，结算成功的用户数，一个人多次结算记为一个（拼团在成团时计入筛选，问答在回答后计入筛选，API导入订单不计入筛选',
          nowNum: '312',
          daysForm: '+26%',
          weeksForm: '+36%'
        },
        {
          title: '活跃付费用户',
          hint: '活跃付费用户：筛选时间内，访问过店铺的付费用户数（拼团在成团时计入筛选，问答在回答后计入筛选，API导入订单不计入筛选）',
          nowNum: '352',
          daysForm: '+26%',
          weeksForm: '+36%'
        }
      ]
    }
  },
  mounted() {
    this.initBalanceChart()
    this.initKernelChart()
    this.initFlowChart()
    this.initShopUserChart()
    this.initShopUserPayChart()
    this.initUserMoneyChart()
    this.initUserNumChart()
  },
  beforeDestroy() {
    if (!(this.balanceChart || this.kernelChart || this.flowChart || this.shopUserChart || this.shopUserPayChart || this.userMoneyChart || this.userNumChart)) {
      return
    }
    this.balanceChart.dispose()
    this.balanceChart = null
    this.kernelChart.dispose()
    this.kernelChart = null
    this.flowChart.dispose()
    this.flowChart = null
    this.shopUserChart.dispose()
    this.shopUserChart = null
    this.shopUserPayChart.dispose()
    this.shopUserPayChart = null
    this.userMoneyChart.dispose()
    this.userMoneyChart = null
    this.userNumChart.dispose()
    this.userNumChart = null
  },
  methods: {
    initBalanceChart() {
      this.balanceChart = echarts.init(document.getElementById('balance'))
      this.balanceChart.setOption(
        {
          backgroundColor: '#fff',
          title: {
            text: '收入',
            textStyle: {
              fontWeight: 'normal',
              fontSize: 16,
              color: '#353535'
            },
            left: '0%'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: '#57617B'
              }
            }
          },
          legend: {
            icon: 'rect',
            itemWidth: 14,
            itemHeight: 5,
            itemGap: 13,
            show: true,
            data: ['昨日收入', '今日收入'],
            selected: { '昨日收入': true, '今日收入': true },
            right: '40%',
            textStyle: {
              fontSize: 12,
              color: '#353535'
            }
          },
          grid: {
            left: '0%',
            right: '2%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: '#57617B'
              }
            },
            data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11']
          }, {
            axisPointer: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#57617B'
              }
            }
          }],
          yAxis: [{
            type: 'value',
            name: '',
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#57617B'
              }
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 14
              }
            },
            splitLine: {
              lineStyle: {
                color: '#eee'
              }
            }
          }],
          series: [{
            name: '今日收入',
            type: 'line',
            smooth: true,
            show: false,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 1
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(137, 189, 27, 0.3)'
                }, {
                  offset: 0.8,
                  color: 'rgba(137, 189, 27, 0)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: 'rgb(137,189,27)',
                borderColor: 'rgba(137,189,2,0.27)',
                borderWidth: 12

              }
            },
            data: [255, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
          }, {
            name: '昨日收入',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 1
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(0, 136, 212, 0.3)'
                }, {
                  offset: 0.8,
                  color: 'rgba(0, 136, 212, 0)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: 'rgb(0,136,212)',
                borderColor: 'rgba(0,136,212,0.2)',
                borderWidth: 12

              }
            },
            data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
          }
          ]
        }
      )
    },
    initKernelChart() {
      this.kernelChart = echarts.init(document.getElementById('kernel'))
      this.kernelChart.setOption(
        {
          backgroundColor: '#fff',
          title: {
            text: '指标趋势',
            textStyle: {
              fontWeight: 'normal',
              fontSize: 16,
              color: '#353535'
            },
            left: '0%'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: '#57617B'
              }
            }
          },
          legend: {
            icon: 'rect',
            itemWidth: 14,
            itemHeight: 5,
            itemGap: 13,
            show: true,
            data: ['结算金额(元)', '访客数', '支付转化率', '客单价', '付费用户数', '支付订单数'],
            selected: { '结算金额(元)': true, '访客数': true, '支付转化率': false, '客单价': false, '付费用户数': false, '支付订单数': false },
            x: 'center',
            textStyle: {
              fontSize: 12,
              color: '#353535'
            }
          },
          grid: {
            left: '0%',
            right: '2%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: '#57617B'
              }
            },
            data: ['2019-06-01', '2019-06-02', '2019-06-03', '2019-06-04', '2019-06-05', '2019-06-06', '2019-06-07', '2019-06-08', '2019-06-09', '2019-06-10', '2019-06-11', '2019-06-12']
          }, {
            axisPointer: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#57617B'
              }
            }
          }],
          yAxis: [
            {
              type: 'value',
              name: '',
              axisTick: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  color: '#57617B'
                }
              },
              axisLabel: {
                margin: 10,
                textStyle: {
                  fontSize: 14
                }
              },
              splitLine: {
                lineStyle: {
                  color: '#eee'
                }
              }
            },
            {
              type: 'value',
              name: '',
              axisLabel: {
                show: true,
                interval: 'auto',
                formatter: '{value} %'
              }
            }
          ],
          series: [
            {
              name: '结算金额(元)',
              type: 'line',
              yAxisIndex: 0,
              smooth: true,
              show: false,
              symbol: 'circle',
              symbolSize: 5,
              showSymbol: false,
              lineStyle: {
                normal: {
                  width: 1
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(137, 189, 27, 0.3)'
                  }, {
                    offset: 0.8,
                    color: 'rgba(137, 189, 27, 0)'
                  }], false),
                  shadowColor: 'rgba(0, 0, 0, 0.1)',
                  shadowBlur: 10
                }
              },
              itemStyle: {
                normal: {
                  color: 'rgb(137,189,27)',
                  borderColor: 'rgba(137,189,2,0.27)',
                  borderWidth: 12

                }
              },
              data: [599.00, 399.00, 299.00, 199.00, 699.00, 499.00, 599.00, 299.00, 599.00, 499.00, 599.00, 299.00]
            },
            {
              name: '访客数',
              type: 'line',
              yAxisIndex: 0,
              smooth: true,
              symbol: 'circle',
              symbolSize: 5,
              showSymbol: false,
              lineStyle: {
                normal: {
                  width: 1
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(0, 136, 212, 0.3)'
                  }, {
                    offset: 0.8,
                    color: 'rgba(0, 136, 212, 0)'
                  }], false),
                  shadowColor: 'rgba(0, 0, 0, 0.1)',
                  shadowBlur: 10
                }
              },
              itemStyle: {
                normal: {
                  color: 'rgb(0,136,212)',
                  borderColor: 'rgba(0,136,212,0.2)',
                  borderWidth: 12

                }
              },
              data: [5, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
            },
            {
              name: '支付转化率',
              type: 'line',
              yAxisIndex: 1,
              smooth: true,
              symbol: 'circle',
              symbolSize: 5,
              showSymbol: false,
              lineStyle: {
                normal: {
                  width: 1
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(251,212,75, 0.3)'
                  }, {
                    offset: 0.8,
                    color: 'rgba(251,212,75, 0)'
                  }], false),
                  shadowColor: 'rgba(0, 0, 0, 0.1)',
                  shadowBlur: 10
                }
              },
              itemStyle: {
                normal: {
                  color: 'rgb(251,212,75)',
                  borderWidth: 12
                }
              },
              data: ['54', '90', '60', '90', '40', '70', '97', '78', '89', '45', '78', '56']
            },
            {
              name: '客单价',
              type: 'line',
              yAxisIndex: 0,
              smooth: true,
              symbol: 'circle',
              symbolSize: 5,
              showSymbol: false,
              lineStyle: {
                normal: {
                  width: 1
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(244,102,124, 0.3)'
                  }, {
                    offset: 0.8,
                    color: 'rgba(244,102,124, 0)'
                  }], false),
                  shadowColor: 'rgba(0, 0, 0, 0.1)',
                  shadowBlur: 10
                }
              },
              itemStyle: {
                normal: {
                  color: 'rgb(244,102,124)',
                  borderWidth: 12
                }
              },
              data: [253, 322, 251, 125, 212, 354, 421, 452, 122, 220, 345, 391]
            },
            {
              name: '付费用户数',
              type: 'line',
              yAxisIndex: 0,
              smooth: true,
              symbol: 'circle',
              symbolSize: 5,
              showSymbol: false,
              lineStyle: {
                normal: {
                  width: 1
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(137,123,211, 0.3)'
                  }, {
                    offset: 0.8,
                    color: 'rgba(137,123,211, 0)'
                  }], false),
                  shadowColor: 'rgba(0, 0, 0, 0.1)',
                  shadowBlur: 10
                }
              },
              itemStyle: {
                normal: {
                  color: 'rgb(137,123,211)',
                  borderWidth: 12
                }
              },
              data: [65, 35, 75, 65, 145, 111, 64, 75, 86, 96, 102, 84]
            },
            {
              name: '支付订单数',
              type: 'line',
              yAxisIndex: 0,
              smooth: true,
              symbol: 'circle',
              symbolSize: 5,
              showSymbol: false,
              lineStyle: {
                normal: {
                  width: 1
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(73,204,203, 0.3)'
                  }, {
                    offset: 0.8,
                    color: 'rgba(73,204,203, 0)'
                  }], false),
                  shadowColor: 'rgba(0, 0, 0, 0.1)',
                  shadowBlur: 10
                }
              },
              itemStyle: {
                normal: {
                  color: 'rgb(73,204,203)',
                  borderWidth: 12
                }
              },
              data: [13, 24, 36, 45, 34, 26, 45, 23, 65, 45, 55, 35]
            }
          ]
        }
      )
    },
    initFlowChart() {
      this.flowChart = echarts.init(document.getElementById('flow'))
      this.flowChart.setOption(
        {
          backgroundColor: '#fff',
          title: {
            text: '流量趋势',
            textStyle: {
              fontWeight: 'normal',
              fontSize: 16,
              color: '#353535'
            },
            left: '0%'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: '#57617B'
              }
            }
          },
          legend: {
            icon: 'rect',
            itemWidth: 14,
            itemHeight: 5,
            itemGap: 13,
            show: true,
            data: ['浏览量', '访客数'],
            selected: { '浏览量': true, '访客数': true },
            right: '5%',
            textStyle: {
              fontSize: 12,
              color: '#353535'
            }
          },
          grid: {
            left: '0%',
            right: '2%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: '#57617B'
              }
            },
            data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11']
          }, {
            axisPointer: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#57617B'
              }
            }
          }],
          yAxis: [{
            type: 'value',
            name: '',
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#57617B'
              }
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 14
              }
            },
            splitLine: {
              lineStyle: {
                color: '#eee'
              }
            }
          }],
          series: [{
            name: '浏览量',
            type: 'line',
            smooth: true,
            show: false,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 1
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(137, 189, 27, 0.3)'
                }, {
                  offset: 0.8,
                  color: 'rgba(137, 189, 27, 0)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: 'rgb(137,189,27)',
                borderColor: 'rgba(137,189,2,0.27)',
                borderWidth: 12

              }
            },
            data: [555, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
          }, {
            name: '访客数',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 1
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(0, 136, 212, 0.3)'
                }, {
                  offset: 0.8,
                  color: 'rgba(0, 136, 212, 0)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: 'rgb(0,136,212)',
                borderColor: 'rgba(0,136,212,0.2)',
                borderWidth: 12

              }
            },
            data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
          }
          ]
        }
      )
    },
    initShopUserChart() {
      this.shopUserChart = echarts.init(document.getElementById('shopUser'))
      this.shopUserChart.setOption(
        {
          backgroundColor: '#fff',
          title: {
            text: '',
            textStyle: {
              fontWeight: 'normal',
              fontSize: 16,
              color: '#353535'
            },
            left: '0%'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: '#57617B'
              }
            }
          },
          legend: {
            icon: 'rect',
            itemWidth: 14,
            itemHeight: 5,
            itemGap: 13,
            show: true,
            data: ['累积用户', '新增用户', '活跃用户'],
            selected: { '累积用户': false, '新增用户': true, '活跃用户': true },
            right: '5%',
            textStyle: {
              fontSize: 12,
              color: '#353535'
            }
          },
          grid: {
            left: '0%',
            right: '2%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: '#57617B'
              }
            },
            data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11']
          }, {
            axisPointer: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#57617B'
              }
            }
          }],
          yAxis: [{
            type: 'value',
            name: '',
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#57617B'
              }
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 14
              }
            },
            splitLine: {
              lineStyle: {
                color: '#eee'
              }
            }
          }],
          series: [{
            name: '累积用户',
            type: 'line',
            smooth: true,
            show: false,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 1
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(	65,105,225, 0.3)'
                }, {
                  offset: 0.8,
                  color: 'rgba(	65,105,225, 0)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: 'rgb(	65,105,225)',
                borderColor: 'rgba(	65,105,225,0.27)',
                borderWidth: 12

              }
            },
            data: [355, 378, 399, 402, 433, 451, 465, 499, 502, 536, 577, 602]
          },
          {
            name: '新增用户',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 1
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(0, 136, 212, 0.3)'
                }, {
                  offset: 0.8,
                  color: 'rgba(0, 136, 212, 0)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: 'rgb(0,136,212)',
                borderColor: 'rgba(0,136,212,0.2)',
                borderWidth: 12

              }
            },
            data: [13, 25, 31, 24, 26, 19, 18, 32, 51, 54, 26, 65]
          },
          {
            name: '活跃用户',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 1
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(	0,255,127, 0.3)'
                }, {
                  offset: 0.8,
                  color: 'rgba(	0,255,127, 0)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: 'rgb(0,255,127)',
                borderColor: 'rgba(	0,255,127,0.2)',
                borderWidth: 12

              }
            },
            data: [151, 164, 184, 222, 144, 155, 262, 255, 300, 155, 366, 255]
          }
          ]
        }
      )
    },
    initShopUserPayChart() {
      this.shopUserPayChart = echarts.init(document.getElementById('shopUserPay'))
      this.shopUserPayChart.setOption(
        {
          backgroundColor: '#fff',
          title: {
            text: '',
            textStyle: {
              fontWeight: 'normal',
              fontSize: 16,
              color: '#353535'
            },
            left: '0%'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: '#57617B'
              }
            }
          },
          legend: {
            icon: 'rect',
            itemWidth: 14,
            itemHeight: 5,
            itemGap: 13,
            show: true,
            data: ['累计付费用户', '付费用户', '活跃付费用户'],
            selected: { '累计付费用户': false, '付费用户': true, '活跃付费用户': true },
            right: '5%',
            textStyle: {
              fontSize: 12,
              color: '#353535'
            }
          },
          grid: {
            left: '0%',
            right: '2%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: '#57617B'
              }
            },
            data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11']
          }, {
            axisPointer: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#57617B'
              }
            }
          }],
          yAxis: [{
            type: 'value',
            name: '',
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#57617B'
              }
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 14
              }
            },
            splitLine: {
              lineStyle: {
                color: '#eee'
              }
            }
          }],
          series: [{
            name: '累计付费用户',
            type: 'line',
            smooth: true,
            show: false,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 1
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(	65,105,225, 0.3)'
                }, {
                  offset: 0.8,
                  color: 'rgba(	65,105,225, 0)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: 'rgb(	65,105,225)',
                borderColor: 'rgba(	65,105,225,0.27)',
                borderWidth: 12

              }
            },
            data: [355, 378, 399, 402, 433, 451, 465, 499, 502, 536, 577, 602]
          },
          {
            name: '付费用户',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 1
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(0, 136, 212, 0.3)'
                }, {
                  offset: 0.8,
                  color: 'rgba(0, 136, 212, 0)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: 'rgb(0,136,212)',
                borderColor: 'rgba(0,136,212,0.2)',
                borderWidth: 12

              }
            },
            data: [13, 25, 31, 24, 26, 19, 18, 32, 51, 54, 26, 65]
          },
          {
            name: '活跃付费用户',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 1
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(	0,255,127, 0.3)'
                }, {
                  offset: 0.8,
                  color: 'rgba(	0,255,127, 0)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: 'rgb(0,255,127)',
                borderColor: 'rgba(	0,255,127,0.2)',
                borderWidth: 12

              }
            },
            data: [151, 164, 184, 222, 144, 155, 262, 255, 300, 155, 366, 255]
          }
          ]
        }
      )
    },
    initUserMoneyChart() {
      this.userMoneyChart = echarts.init(document.getElementById('userMoney'))
      this.userMoneyChart.setOption(
        {
          color: ['#FF69B4', '#1E90FF'],
          title: {
            text: '新老用户结算金额占比',
            textStyle: {
              fontWeight: 'normal',
              fontSize: 16,
              color: '#353535'
            },
            x: 'center',
            y: 'bottom'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            x: 'right',
            data: ['新付费用户结算金额', '老付费用户结算金额']
          },
          series: [
            {
              name: '{a}',
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '14',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: [
                { value: 335, name: '新付费用户结算金额' },
                { value: 310, name: '老付费用户结算金额' }
              ]
            }
          ]
        }
      )
    },
    initUserNumChart() {
      this.userNumChart = echarts.init(document.getElementById('userNum'))
      this.userNumChart.setOption(
        {
          color: ['#FF69B4', '#1E90FF'],
          title: {
            text: '新老用户结算人数占比',
            textStyle: {
              fontWeight: 'normal',
              fontSize: 16,
              color: '#353535'
            },
            x: 'center',
            y: 'bottom'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            x: 'right',
            data: ['新付费用户结算人数', '老付费用户结算人数']
          },
          series: [
            {
              name: '{a}',
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '14',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: [
                { value: 235, name: '新付费用户结算人数' },
                { value: 610, name: '老付费用户结算人数' }
              ]
            }
          ]
        }
      )
    }

  }
}
</script>

<style lang="scss" scoped>
.survey {
  padding: 10px;
  padding-bottom: 40px;
  .stat-card-box {
    cursor: pointer;
    padding: 0 14px;
    .stat-card {
      border: 1px solid #666;
      padding: 20px;
      margin: 1%;
      width: 48%;
      display: inline-block;
      .card-title {
        display: flex;
        color: #666;
        i {
          margin-left: auto;
        }
      }
      .card-user {
        font-size: 30px;
        color: #353535;
        margin: 5px 0px 30px;
      }
      .card-yesterday {
        font-size: 12px;
        color: #666;
        .card-yesterday-num {
          margin-left: 10px;
        }
      }
    }
    .stat-card.portait {
      display: block;
      width: 100%;
      margin: 2%;
    }
    .stat-card.user-view {
      margin: 0;
      width: 33.3%;
    }
    .stat-card.user-view:not(:nth-child(2)) {
      border-left: none;
    }
    .stat-card.again {
      width: 45%;
      margin-top: 60px;
    }
  }
  .content-left,
  .content-right {
    position: relative;
    margin: auto;
    width: 404px;
    height: 209px;
    overflow: hidden;
    .conversion-chart {
      position: relative;
      width: 280px;
      height: 280px;
      border: 6px solid #eee;
      border-radius: 50%;
      .conversion-chart_content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        .percentage {
          margin: 5px 0px 25px;
          font-size: 30px;
          color: #353535;
          line-height: 38px;
        }
        .conversion-growth {
          position: absolute;
          top: 70px;
          left: 50%;
          width: 100%;
          transform: translateX(-50%);
          text-align: left;
          .col-growth {
            white-space: nowrap;
            .small-list_title {
              margin-right: 8px;
              font-size: 12px;
              line-height: 20px;
              color: #666;
            }
            .growth {
              position: relative;
              line-height: 22px;
            }
          }
        }
      }
    }
    .conversion-info {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 0;
      .conversion-info_title {
        margin-bottom: 5px;
        font-size: 14px;
        color: #666666;
        line-height: 22px;
      }
      .conversion-info_num {
        font-size: 30px;
        color: #353535;
        line-height: 38px;
      }
    }
  }
}
</style>
